<template>
  <div>
    <el-row align="middle" class="mytop" v-if="orders.length>0">
      <el-col :span="4">
        <el-input v-model="order.pId" placeholder="请输入订单号">
          <el-button slot="append" @click="search" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <div v-for=" o in orders">
      <el-row class="mytop">
        <el-col :span="24">
          <el-table border :data="o.ordersDetails" :span-method="objectSpanMethod">
            <el-table-column width="250">
              <template slot="header">
                订单号:{{o.pid}}
              </template>
              <template slot-scope="scope">
                <el-image
                  style="width: 180px; height: 150px"
                  :src="scope.row.shopInfo.imags[0].imagUrl"
                  fit="fill"></el-image>
              </template>
            </el-table-column>
            <el-table-column label="商品" prop="shopInfo.shopName"></el-table-column>
            <el-table-column label="单价(元)" prop="shopInfo.shopPrice"></el-table-column>
            <el-table-column label="数量" prop="buyQuantity"></el-table-column>
            <el-table-column label="商品操作">
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.isReturn==0">正常</el-tag>
                <el-tag type="warning" v-if="scope.row.isReturn==1">待退款</el-tag>
                <el-tag type="primary" v-if="scope.row.isReturn==2">确认退货</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="商品总价(元)">
              <template slot-scope="scope">
                {{scope.row.sumPrice}}
              </template>
            </el-table-column>
            <el-table-column label="实付款">
              {{o.sumPrice}}元
            </el-table-column>
            <el-table-column label="货物状态">
              <template>
                <el-tag type="warning" v-if="o.goodsState=='g-1'">待发货</el-tag>
                <el-tag type="success" v-if="o.goodsState=='g-2'">出库中</el-tag>
                <el-tag type="success" v-if="o.goodsState=='g-3'">待收货</el-tag>
                <el-tag type="success" v-if="o.goodsState=='g-4'">待提货</el-tag>
                <el-tag type="success" v-if="o.goodsState=='g-5'">用户待确认</el-tag>
                <el-tag type="success" v-if="o.goodsState=='g-6'">已收货</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="交易状态">
              <template>
                <el-tag type="warning" v-if="o.orderState=='o-1'">待付款</el-tag>
                <el-tag type="success" v-if="o.orderState=='o-2'">待提货</el-tag>
                <el-tag type="success" v-if="o.orderState=='o-3'">已提货</el-tag>
                <el-tag type="success" v-if="o.orderState=='o-4'">待评价</el-tag>
                <el-tag type="success" v-if="o.orderState=='o-5'">订单完成</el-tag>
                <el-tag type="success" v-if="o.orderState=='o-6'">已付款</el-tag>
                <el-tag type="success" v-if="o.orderState=='o-7'">交易关闭</el-tag>
                <br> <el-link type="primary" @click="openDetail(o.id)" >订单详情</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
    <el-row class="mytop" v-if="orders.length>0">
      <el-col :span="4">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageno"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <div>
      <OrderDetailView ref="orderDetailView"></OrderDetailView>
    </div>
    <div>
      <el-empty v-if="orders.length==0" description="暂无数据"></el-empty>
    </div>
  </div>
</template>

<script>
  import ReturnView from "../returnShop/ReturnView";
  import OrderDetailView from "../orderview/OrderDetailView";
  export default {
    name: "OrderViewBack",
    data() {
      return {
        order: {pid: "", orderState: ""},
        orders: [],
        pageno: 1,
        pagesize: 5,
        total: 1,
        rowspan: 0,
        dialogVisible: false, //退货单状态
        dialogVisible2:false, //订单详情状态
      }
    },
    methods: {
      openDetail(id){
        //订单详情 查看订单收货地址以及收货人
        this.$refs.orderDetailView.dialogVisible=true;
        this.$nextTick(item=>{
          this.$refs.orderDetailView.getData(id);
        })
      },
      handleClose() {
        this.$nextTick(item => {
          //this.$refs.returnView.cancel();
        })
      },
      getOrders() {
        var params = {};
        params["pageno"] = this.pageno;
        params["pagesize"] = this.pagesize;
        Object.keys(this.order).forEach(item => {
          params[item] = this.order[item];
        });
        this.$axios.get("order.action", {params: params})
          .then(res => {
            console.log(res.data.records)
            this.orders = res.data.records;
            this.total = res.data.total;
            this.orders.forEach(item => {
              item.ordersDetails.forEach(detail => {
                detail.shopInfo.imags[0].imagUrl = "http://127.0.0.1:9090/demo/" + detail.shopInfo.imags[0].imagUrl
              })
            })
          }).catch(err => {
          this.$message.error(err)
        });
      },
      search() {
        this.getOrders();
      },
      objectSpanMethod({row, column, rowIndex, columnIndex}) {
        //合并列
        if (columnIndex === 6) {
          if (rowIndex === 0) {
            let o1 = this.orders.find(item => item.id = row.pid);
            return {
              rowspan: o1.ordersDetails.length,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
        if (columnIndex === 7) {
          if (rowIndex === 0) {
            let o1 = this.orders.find(item => item.id = row.pid);
            return {
              rowspan: o1.ordersDetails.length,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
        if (columnIndex === 8) {
          if (rowIndex === 0) {
            let o1 = this.orders.find(item => item.id = row.pid);
            return {
              rowspan: o1.ordersDetails.length,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      },
      handleSizeChange(val) {
        //每页范围
        this.pagesize = val;
        this.getOrders();
      },
      handleCurrentChange(val) {
        //当前页
        this.pageno = val;
        this.getOrders();
      },
    },
    components: {
      ReturnView,
      OrderDetailView
    }
  }
</script>

<style scoped>
  .mytop {
    margin-top: 20px;
  }
</style>
